<template>
	<view class="container">
		<view class="item">
			<view class="item-left">
				<view class="item-left-icon" v-if="isLeftIcon"></view>
				<view class="item-left-text">
					<view class="title">{{ title }}
						<view class="item-title-icon" v-if="isBottomIcon"></view>
					</view>
					<view>{{ desc }}</view>
				</view>
			</view>
			<view class="item-right" @click="toPage">
				<text>{{ rightText }}</text>
				<u-icon name="arrow-right" v-if="isNextIcon"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "qc-itemHead",
		props: {
			// 模式 预留字段 标题在中间、标题在左侧

			// 左侧图标
			// leftIcon: {
			// 	type: String,
			// 	default: '/static/components/qc-list/praise.png'
			// },
			// 右侧图标
			// nextIcon: {
			// 	type: String,
			// 	default: '/static/components/qc-list/right.png'
			// },

			// 是否显示左侧图标
			isLeftIcon: {
				type: Boolean,
				default: false
			},
			// 是否显示标题底部图标
			isBottomIcon: {
				type: Boolean,
				default: false
			},
			// 是否显示右侧图标
			isNextIcon: {
				type: Boolean,
				default: true
			},
			// 主标题
			title: {
				type: String,
				default: ''
			},
			// 副标题
			desc: {
				type: String,
				default: ''
			},
			// 右侧跳转文字
			rightText: {
				type: String,
				default: '更多'
			},
			// 点击要跳转的路径
			path: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		methods: {
			toPage() {
				if (this.path) {
					uni.navigateTo({
						url: this.path
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
	}

	.item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 32rpx;

		.item-left {
			width: 65%;
			display: flex;
			align-items: center;

			.item-left-icon {
				width: 8rpx;
				height: 40rpx;
				background: #0075FF;
				border-radius: 6rpx;

			}

			.item-left-text {
				margin-left: 20rpx;
				display: flex;
				align-items: center;

				view {
					font-size: 38rpx;
					font-weight: 600;
					color: #333333;

					&:nth-of-type(2) {
						margin-left: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #888888;
					}
				}
				.title{
					position: relative;
				}
				.item-title-icon {
					background: linear-gradient(270deg, #B3C9FF 0%, #FFFFFF 100%);
					height: 20rpx;
					position: absolute;
					bottom: -2rpx;
					right: -2rpx;
					width: 100%;
					z-index: -1;
				}
			}
		}

		.item-right {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 30rpx;
			color: #999999;

			u-icon {
				margin-top: 2rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>
